<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>缺陷类型确认</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script src="../../layui/layui.js"></script>
  <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../css/admin.css" media="all">
  <style>
      * {
          margin: 0;
          padding: 0;
      }

      body {
          height: 100vh;
      }

      .float-right {
          float: right;
      }

      .float-left {
          float: left;
      }

      .inline-block {
          display: inline-block;
      }

      .margin-top {
          margin-top: 20px;
      }
      .layui-form-label,
      .layui-input-block{
          width: 150px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-content: space-between;
      }
  </style>
  <script>
    layui.use(['form','table','layer','dropdown','util','form','laydate'],function (){
      var table = layui.table;
      var layer = layui.layer
      var $ = layui.$;
      var dropdown = layui.dropdown
      var util = layui.util;
      var form = layui.form
          ,laydate = layui.laydate;

      table.render({
        elem: '#flaw-confirm-table',
        url: '/flaw/getFlaw',
        toolbar: '#toolbarDemo',
        cols: [
          [{
            field: 'task_number',
            width: 150,
            title: '任务编号',
          },
            {
              field: 'pole_number',
              width: 150,
              title: '线路编号',
            },
            {
              field: 'circuit_number',
              width: 150,
              title: '塔杆编号',
            },
            {
              field: 'type',
              width: 150,
              title: '缺陷类型',
            },
            {
              field: 'perfect',
              width: 150,
              title: '完好率',
            },
            {
              field: 'desctiption',
              width: 150,
              title: '缺陷描述',
            },
            {
              field: 'fint_time',
              width: 150,
              title: '发现时间',
            },
            {
              field: 'fint_peo',
              width: 150,
              title: '发现人员',
            },
            {
              field: 'level',
              width: 150,
              title: '缺陷水平',
              toolbar:'#levelBar'
            },
          ]
        ],
        page: true,
        skin: 'row',
        limit: 5,
      });
      // 日期
      laydate.render({
        elem: '#date'
      });
      // 表格工具
      table.on('tool(flaw-confirm-table)',function (obj) {
        var that=this
            ,data=obj.data;
        dropdown.render({
          elem: that
          ,show: true //外部事件触发即显示
          ,data: [{
            title: '一般'
            ,id: 1
          }, {
            title: '紧急'
            ,id: 2
          }, {
            title: '严重'
            ,id: 3
          }],
          click:function (data,othis) {
            $.ajax({
              method:"post",
              url: `/flaw/updateFlaw/${obj.data.id}`
            })
            layer.msg("更新成功")
            table.reload('flaw-confirm-table', {
              page: {
                curr: 1
              }
            })
          }
        })

      })
      //    表单提交(搁置)
      form.on('submit(submit)', function(data){
        console.log(data)
        layer.alert(JSON.stringify(data.field), {
          title: '最终的提交信息'
        })
        return false;
      });
    })


  </script>
</head>
<body class="layui-layout-body">
<div id="confirm-form" class="confirm-form">
  <form action="" method="post" class="layui-form">
    <label class="layui-form-label">任务编号</label>
    <div class="layui-input-block">
      <input type="text" name="task_number" lay-verify="task_number" autocomplete="off" placeholder="" class="layui-input">
    </div>
    <label class="layui-form-label">线路编号</label>
    <div class="layui-input-block">
      <input type="text" name="pole_number" lay-verify="pole_number" autocomplete="off" placeholder="" class="layui-input">
    </div>
    <label class="layui-form-label">塔杆编号</label>
    <div class="layui-input-block">
      <input type="text" name="circuit_number" lay-verify="circuit_number" autocomplete="off" placeholder="" class="layui-input">
    </div>
    <label class="layui-form-label">发现人</label>
    <div class="layui-input-block">
      <input type="text" name="fint_peo" lay-verify="fint_peo" autocomplete="off" placeholder="" class="layui-input">
    </div>
    <!--        缺陷级别，缺陷类型-->
    <div class="layui-form-item">
      <label class="layui-form-label">缺陷类型</label>
      <div class="layui-input-block">
        <select name="type" lay-verify="required">
          <option value=""></option>
          <option value="0">叉梁断裂</option>
          <option value="1">拦河线断裂</option>
          <option value="2">绝缘子爆破</option>
          <option value="3">塔杆倾斜</option>
          <option value="4">吊杆变形</option>
          <option value="5">其他</option>
        </select>
      </div>
    </div>
    <!--        缺陷级别-->
    <div class="layui-form-item">
      <label class="layui-form-label">缺陷级别</label>
      <div class="layui-input-block">
        <select name="level" lay-verify="required">
          <option value=""></option>
          <option value="0">一般</option>
          <option value="1">紧急</option>
          <option value="2">严重</option>
        </select>
      </div>
    </div>
    <!--        发现时间-->
    <div class="layui-inline layui-form-item">
      <label class="layui-form-label">发现时间</label>
      <div class="layui-input-inline">
        <input type="text" name="date" id="date" lay-verify="date" placeholder="2021-07-08" autocomplete="off" class="layui-input">
      </div>
    </div>
    <!--        提交按钮-->
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
      </div>
    </div>
  </form>
</div>
<!--table渲染-->
<div id="table-box">
  <table class="flaw-confirm-table" id="flaw-confirm-table" lay-filter="flaw-confirm-table"></table>
</div>
<!--table行工具-->
<script type="text/html" id="levelBar">
  <button class="layui-btn layui-btn-xs" lay-event="more" id="selecter">--请选择-- <i class="layui-icon layui-icon-down"></i></button>
</script>
</body>
</html>